<template>
  <view>
    <camera
      class="camera-box"
      resolution="high"
      @initdone="initdone"
      :style="{ width: windowWidth + 'px', height: windowHeight + 'px' }"
    >
      <cover-view class="camerabgImage">
        <cover-view class="active">
          <cover-image
            class="active-image"
            src="https://oss.nodekoa.com/blog/2020/12/0716073342969601272.png"
          ></cover-image>

          <cover-view class="text">请将文字放入框中，点击拍照进行识别</cover-view>

          <cover-view class="beat" @click="scan">
            <cover-image class="beatImg" src="../../static/IconFont/album.png"></cover-image>
            <cover-view>相册</cover-view>
          </cover-view>
          <cover-view class="btn" @click="takePhoto">
            <cover-image class="beatImg" src="../../static/IconFont/takePhoto.png"></cover-image>
          </cover-view>
          <!-- <cover-view class="btn2" @click="chooseImg">
						<cover-view class="button2"></cover-view>
          </cover-view>-->
        </cover-view>
      </cover-view>
    </camera>
    <canvas class="cop" canvas-id="image-canvas"></canvas>
  </view>
</template>

<script>
export default {
  data() {
    return {
      scanShow: true,
      isShowImage: false,
      windowWidth: '',
      windowHeight: '',
      canvas: '',
      img: '',
      maxZoom: null,
      currentZoom: 1,
    }
  },
  onLoad() {
    this.authorize()
    let { windowWidth, windowHeight } = uni.getSystemInfoSync()
    this.windowWidth = windowWidth
    this.windowHeight = windowHeight
  },
  onShow() {
    this.currentZoom = 1
  },
  methods: {
    // 授权
    authorize() {
      uni.getSetting({
        success: (res) => {
          if (!res.authSetting['scope.camera']) {
            uni.authorize({
              scope: 'scope.camera',
              success: () => {
                console.log('授权成功')
              },
              fail: () => {
                uni.showModal({
                  title: '提示',
                  content: '尚未进行授权，该功能将无法使用',
                  success: (res1) => {
                    if (res1.confirm) {
                      uni.openSetting({
                        success: (setting) => {
                          // console.log(setting);
                          if (setting.authSetting['scope.camera']) {
                            uni.showToast({
                              title: '授权成功!',
                            })
                          } else {
                            uni.showToast({
                              title: '授权失败!',
                              icon: 'none',
                            })
                            setTimeout(() => {
                              uni.navigateBack()
                            }, 1000)
                          }
                        },
                      })
                    } else {
                      uni.navigateBack()
                    }
                  },
                })
              },
            })
          }
        },
      })
    },
    scan() {
      uni.chooseImage({
        count: 1,
        sizeType: ['original', 'compressed'],
        sourceType: ['album'], //这要注意，camera掉拍照，album是打开手机相册
        success: (res) => {
          const tempFilePaths = res.tempFilePaths[0]
          this.tui.nav('../cropper/cropper?src=' + tempFilePaths)
        },
      })
    },
    chooseImg() {
      uni.chooseImage({
        count: 1,
        sizeType: ['original', 'compressed'],
        sourceType: ['album'], //这要注意，camera掉拍照，album是打开手机相册
        success: (res) => {
          this.loadTempImagePath(res.tempImagePath)
        },
      })
    },
    initdone({ detail: { maxZoom } }) {
      // 最大放大倍速
      this.maxZoom = maxZoom / 2
    },
    setZoom(zoom) {
      console.log(this.currentZoom)
      const ctx = uni.createCameraContext()
      if (zoom) {
        // console.log(this.maxZoom);
        if (this.currentZoom >= this.maxZoom) return false
        // console.log(size);
        ctx.setZoom({
          zoom: (this.currentZoom += 1),
        })
      } else {
        if (this.currentZoom <= 1) return false
        // console.log(size);
        ctx.setZoom({
          zoom: (this.currentZoom -= 1),
        })
      }
    },
    takePhoto() {
      const ctx = uni.createCameraContext()
      ctx.takePhoto({
        quality: 'high',

        success: (res) => {
          this.loadTempImagePath(res.tempImagePath)
        },
      })
    },
    //rpx转px
    rpx2px(rpx) {
      const screenWidth = uni.getSystemInfoSync().screenWidth
      return (screenWidth * Number.parseInt(rpx)) / 750
    },
    loadTempImagePath(url) {
      let { windowWidth, windowHeight } = uni.getSystemInfoSync()
      let x = (windowWidth - this.rpx2px(600)) / 2
      let y = windowHeight * 0.2
      let testc = uni.createCanvasContext('image-canvas')
      testc.drawImage(url, 0, 0, windowWidth, windowHeight)
      testc.draw(false, () => {
        uni.canvasToTempFilePath({
          x: x,
          y: y,
          width: this.rpx2px(600),
          height: this.rpx2px(600),
          canvasId: 'image-canvas',
          fileType: 'jpg',
          quality: 1,
          complete: (res2) => {
            // this.http.uploadFile('/api/front/word/recognition', res2.tempFilePath).then((j) => {
            //   const { code, data, msg } = j
            //   if (code === 200) {
            //     data.push({
            //       img: res2.tempFilePath,
            //     })
            //     uni.navigateTo({
            //       url: '../verify/verify?item=' + encodeURIComponent(JSON.stringify(data)),
            //     })
            //   } else {
            //     this.tui.toast(msg)
            //   }
            // })

            // uni.previewImage({
            // 	urls: [res2.tempFilePath]
            // })
            // this.tui.nav('')
            // uni.navigateTo({
            // 	url: 'test?img=' + res2.tempFilePath
            // })
            // this.img = res2.tempFilePath
            // console.log(res2.tempFilePath)
            uni.navigateTo({
              url: '../../pagesA/Cropping/index?item=' + res2.tempFilePath,
            })
          },
        })
      })
    },
  },
}
</script>

<style>
page {
  /* background-color: red; */
  /* background: #fbfbfb; */
  height: auto;
  overflow: hidden;
}
</style>
<style scoped lang="scss">
.zoom {
  width: 300rpx;
  display: flex;
  margin-bottom: 200rpx;
  justify-content: space-around;
  button {
    width: 100rpx;
  }
}
.beat {
  position: relative;

  left: -200rpx;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 24rpx;
  font-weight: 400;
  color: #ffffff;

  bottom: -400rpx;
  .beatImg {
    width: 88rpx;
    height: 88rpx;
    margin-bottom: 30rpx;
  }
}
.cop {
  width: 100%;
  height: 100vh;
}

.camera-box {
  width: 100vw;
  height: 100vh;
}

.camera-box .camerabgImage {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.camera-box .camerabgImage .active {
  width: 100%;
  height: 100%;
  box-shadow: 0 0 0 2000px rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
  align-items: center;
  position: absolute;
  top: 20%;
  left: 0;
  right: 0;
}

.camera-box .camerabgImage .active-image {
  box-shadow: 0 0 0 2000px rgba(0, 0, 0, 0.2);
  // align-items: center;
  display: block;
  width: 600rpx;
  height: 300rpx;
}

.camera-box .camerabgImage .text {
  text-align: center;
  // margin-top: 56rpx;
  // line-height: 100rpx;

  font-size: 28rpx;
  font-weight: 400;
  color: #fff;
  line-height: 100rpx;
}

.camera-box .camerabgImage .btn {
  position: relative;
  bottom: -250rpx;
  width: 110rpx;
  height: 110rpx;
  border-radius: 50%;
  background: #fff;
  border: 6rpx solid#fff;
  margin: 0 auto;
  font-size: 100rpx;
}

.camera-box .camerabgImage .btn .button {
  width: 102rpx;
  height: 102rpx;
  border-radius: 50%;
  border: 4rpx solid#000;
}

.camera-box .camerabgImage .btn2 {
  position: fixed;
  bottom: 100rpx;
  width: 110rpx;
  height: 110rpx;
  border-radius: 50%;
  background: #fff;
  border: 6rpx solid#fff;
  margin-left: 60rpx;
}

.camera-box .camerabgImage .btn2 .button2 {
  width: 102rpx;
  height: 102rpx;
  border-radius: 50%;
  border: 4rpx solid#000;
}

.abc {
  position: absolute;
  width: 20rpx;
  height: 20rpx;
  background: #000000;
  left: 117.9px;
  top: 209.6px;
}
</style>
